<template>
	<view class="cu-modal" @tap="closeModel" :class="tempShowModel==true?'show':''">
		<view :class="'cu-dialog '+(showScroll?'show-scroll':'')">
			
			<!-- 标题 begin -->
			<view @tap.stop="()=>{}" class="cu-bar bg-white justify-end">
				<view class="content">{{title}}</view>
				<view class="action" @tap="closeWin">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<!-- 标题 end -->
			
			<!-- 内容 begin -->
			<scroll-view @tap.stop="()=>{}" class="padding-bottom" scroll-y show-scrollbar="true" :style="'width:100%;height:'+height+'vh'">
				<slot name="content"></slot>
			</scroll-view>
			<!-- 内容 end -->
			
			<!-- 底部 begin -->
			<slot @tap.stop="()=>{}" name="bottom"></slot>
			<!-- 底部 end -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 tempShowModel:false,
				 infoTitle:"",
			};
		},
		name: 'info-win',
		props: {
			title:{
				type:String,
				default:""
			},
			height:{
				type:Number,
				default:50
			},
			showModel: {
				type: [Boolean, String],
				default: false
			},
			showScroll:{
				type:Boolean,
				default:true
			},
			modelClose:{
				type:Boolean,
				default:false
			},
		},
		watch:{
			showModel(val){
				if(val==true){
					this.tempShowModel=val
				}else{
					this.closeWin()
				}
			}
		},
		created() {
			this.tempShowModel=this.showModel
			this.infoTitle=this.title
		},
		methods: {
			closeWin(){
				this.tempShowModel=false
				this.list=[]
				this.$nextTick(()=>{
					this.$emit("closeWin")
				})
			},
			closeModel(){
				if(this.modelClose){
					this.closeWin()
				}
			}
			//数据操作类-------------------------
		}
	}
</script>

<style scoped>
		.show-scroll ::v-deep ::-webkit-scrollbar {
	        // 滚动条整体样式
	        display: block;
	        width: 8rpx !important;
	        height: 8rpx !important;
	        -webkit-appearance: auto !important;
	        background: transparent;
	        overflow: auto !important;
	    }
	     
	    .show-scroll ::v-deep ::-webkit-scrollbar-thumb {
	        // 滚动条里面小方块
	        border-radius: 10rpx !important;
	        box-shadow: inset 0 0 3rpx rgba(0, 0, 0, 0.2) !important;
	        background-color: #a7a7a7 !important;
	    }
	     
	    .show-scroll ::v-deep ::-webkit-scrollbar-track {
	        // 滚动条
	        border-radius: 10rpx !important;
	        box-shadow: inset 0 0 3rpx rgba(0, 0, 0, 0.2) !important;
	        background-color: #f9f9f9 !important;
	    }
</style>